<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>进阶：7、过渡效果 可复用的过渡</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- 实现渐进过渡所需插件 -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
</head>
<body>
	<div id="app1">
		<h3>可复用的过渡组件</h3>
		<input v-model="query">
		<staggered-list :query="query" :list="list"></staggered-list>
	</div>
	
	<script type="text/javascript">
		// 通过前面的demo学习了如何实现过渡效果，某些复杂的过渡效果如果对每个页面块写一次
		// 显然效率很低，将其做成过渡效果组件，显然是更好的做法
		// 这里对demo6中最后一个例子进行组件化改造
		// 保留组件和父组件的数据接口，输入query和选择列表list
		// 具体过渡逻辑组件内部实现即可
		Vue.component('staggered-list', {
			props: ['query','list'],
			template:   '<transition-group\
		    				name="staggered-fade"\
						    tag="ul"\
						    v-bind:css="false"\
						    v-on:before-enter="beforeEnter"\
						    v-on:enter="enter"\
						    v-on:leave="leave"\
					    >\
					    <li\
					        v-for="(item, index) in computedList"\
					        v-bind:key="item.msg"\
					        v-bind:data-index="index"\
					    >{{ item.msg }}</li>\
					 	</transition-group>\
					 	',
			computed: {
				computedList: function () {
				  var vm = this
				  return this.list.filter(function (item) {
				    return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
				  })
				}
			},
			methods: {
				beforeEnter: function (el) {
				    el.style.opacity = 0
				    el.style.height = 0
				},
				enter: function (el, done) {
					var delay = el.dataset.index * 150
					setTimeout(function () {
						Velocity(
						  el,
						  { opacity: 1, height: '1.6em' },
						  { complete: done }
						)
					}, delay)
				},
				leave: function (el, done) {
					var delay = el.dataset.index * 150
					setTimeout(function () {
						Velocity(
						  el,
						  { opacity: 0, height: 0 },
						  { complete: done }
						)
					}, delay)
				}
			}						
		})
		var vm1 = new Vue({
			el: '#app1',
			data: {
				query: '',
			    list: [
			      { msg: 'Bruce Lee' },
			      { msg: 'Jackie Chan' },
			      { msg: 'Chuck Norris' },
			      { msg: 'Jet Li' },
			      { msg: 'Kung Fury' }
			    ]				
			}
		})
	</script>
</body>
</html>